
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,inital-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <script src="js/jQuery3.4.1.js"></script>
        <script src="js/bootstrap.bundle.js"></script>
    <title>我的家乡-保定</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .hero-section {
            background: url('baoding-bg.jpg') no-repeat center center;
            background-size: cover;
            height: 60vh;
        }
        .navbar-brand img {
            height: 40px;
        }
        /* 在CSS文件中添加 */
.navbar-custom {
  background-color: #117A8B;  
  border-bottom: 5px solid #454D55; /* 添加金色边框 */
}

/* 文字颜色适配 */
.navbar-custom.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
}
.navbar-custom.navbar-dark .navbar-nav .nav-link:hover {
  color: #ffd700; /* 悬停时显示金色 */
}


    </style>
</head>
<body>
    <!-- 响应式导航栏 -->
    <nav class="navbar navbar-expand-md  navbar-custom bg-primary fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="img/1111.jpg" alt="保定logo"> 古城保定
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="history.html">历史沿革</a></li>
                    <li class="nav-item"><a class="nav-link" href="meishi.html">名胜古迹</a></li>
                    <li class="nav-item"><a class="nav-link" href="didian.html">特色美食</a></li>
                    <li class="nav-item"><a class="nav-link" href="contact.html">登录</a></li>
                </ul>
                <form class="d-flex ms-3">
                    <input class="form-control me-2" type="search" placeholder="搜索保定...">
                    <button class="btn btn-outline-light" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <div>
    	<img src="img/789.webp" />
    	<img src="img/uio.jpg" style="width: 500px;height: 700px;" />
    	<img src="img/tyu.jpg" style="width: 500px;height: 700px;"/>
    </div>

    <!-- 主要内容区 -->
    <main class="container my-5">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <img src="img/456.jpg" class="card-img-top" alt="保定历史">
                    <div class="card-body">
                        <h5 class="card-title">历史沿革</h5>
                        <p class="card-text">保定有着3000多年的建城史，曾是直隶省会...</p>
                        <a href="history.html" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100">
                    <img src="img/17999.gif"  style="width: 400px;height: 200px;" class="card-img-top" alt="保定景点">
                    <div class="card-body">
                        <h5 class="card-title">名胜古迹</h5>
                        <p class="card-text">直隶总督署、古莲花池、白洋淀...</p>
                        <a href="meishi.html" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100">
                    <img src="img/123.jpg" style="width: 400px;height: 200px;"  class="card-img-top" alt="保定美食">
                    <div class="card-body">
                        <h5 class="card-title">特色美食</h5>
                        <p class="card-text">驴肉火烧、白运章包子、槐茂酱菜...</p>
                        <a href="didian.html" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-dark text-white py-4">
        <div class="container text-center">
            <p>© 2025 我的家乡保定 - 版权所有</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

